<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
  </div>
</template>

<script>
// 样式导入
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'
import 'swiper/modules/navigation/navigation.min.css'

// 模块安装
import MySwiper, {Navigation} from 'swiper';

Swiper.use([Navigation]);

export default {
  mounted() {
    // 初始化过早
    new Swiper('.swiper-container', {
      freeMode: true,
      slidesPerView: 3,
      // 第一张和最后一张贴合边缘
      centeredSlidesBounds: true,
      slideToClickedSlide: true,//设置为true则点击slide会过渡到这个slide。
      centeredSlides: true,//设定为true时，active slide会居中，而不是默认状态下的居左。
    });
  },
}
</script>
<style lang="scss" scoped>
.swiper-wrapper {
  transition: all 1s;
  transition-duration: 1s
}
</style>


